import React, { FormEvent, useRef } from "react";

const Form = () => {
  const usernameRef = useRef<HTMLInputElement>(null)
  const passwordRef = useRef<HTMLInputElement>(null)

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    // useRef获取值的时候需要判断是否为空
    if(usernameRef.current !== null){
      console.log(usernameRef.current.value);
    }
    if(passwordRef.current !== null){
      console.log(passwordRef.current.value);
    }
    console.log("登录成功");
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="mb-3">
        <label htmlFor="username" className="form-label">
          账号
        </label>
        <input id="username" type="text" ref={usernameRef} className="form-control" />
      </div>
      <div className="mb-3">
        <label htmlFor="password" className="form-label">
          密码
        </label>
        <input id="password" type="password" ref={passwordRef} className="form-control" />
      </div>
      <button className="btn btn-secondary">登录</button>
    </form>
  );
};

export default Form;
